<template>
  <!-- 新增组件 -->
  <div class="all">

    <el-button type="primary" plain @click="createdAdd" size="mini">新增</el-button>
    <!-- 弹窗 -->
    <el-dialog
      title="新增"
      :visible.sync="addData.dialogVisibleAdd"
      width="900px"
      :before-close="handleClose"
    >
    <!-- {{addData}} -->
      <div class="list" v-for="(item,index) in addData.diaDataAdd" :key="index" v-if="item.addSign">
        <template v-if="item.addSign">
          <!-- input框 -->
          <div v-if="item.type==='input'&&item.addSign" class="lister">
            <span class="fon">
              <span v-if="!item['skipSign']" style="color:red;">*</span>
              <span v-else style="color:white;">*</span>
              {{item.CN}}:
            </span>
            <span class="inb">
              <!-- 标记：{{[item.attr]}} -->
              <!-- {{item}} -->
              <el-input
                v-model="addData.diaDataAdd[index].value"
                placeholder="请输入内容"
                clearable
                @blur="BurExp($event,item,index)"
                size="mini"
              ></el-input>
            </span>
            <span v-if="!item.result" class="font_color">{{item.err}}</span>
          </div>
          <!-- 计数器 -->
          <div class="lister" :key="index" v-else-if="item.type==='number'&&item.addSign">
            <!-- v-for="(item,index) in addData.diaDataAdd" -->
            <span class="fon">
              <span v-if="!item['skipSign']" style="color:red;">*</span>
              {{item.CN}}:
            </span>
            <span class="inb">
              <!-- 标记：{{[item.attr]}} -->
              <el-input-number
                v-model="addData.diaDataAdd[index].value"
                :min="0"
                label="描述文字"
                size="mini"
              ></el-input-number>
            </span>
            <span v-if="!item.result" class="font_color">{{item.err}}</span>
          </div>
          <!-- 时间选择 -->
          <div class="lister" :key="index" v-else-if="item.type=='date'&&item.addSign">
            <!-- v-for="(item,index) in addData.diaDataAdd" -->
            <span class="fon">
              <span v-if="!item['skipSign']" style="color:red;">*</span>
              {{item.CN}}:
            </span>
            <span class="inb" v-if="item.type=='date'&&item.addSign">
              <el-date-picker
                size="mini"
                v-model="addData.diaDataAdd[index].value"
                type="datetime"
                placeholder="选择日期"
                value-format="yyyy-MM-dd HH:mm:ss"
                @change="getSTime"
              ></el-date-picker>
            </span>
          </div>
          <!-- 下拉框 -->
          <div class="lister" :key="index" v-else-if="item.type=='select'&&item.addSign">
            
            <!-- v-for="(item,index) in addData.diaDataAdd" -->
            <!-- 字典 -->
            <!-- <dictionaries :searchData='diaDataAdd' :modelType='modelType' @optionData="dictionariesCallBack" @optionDataTable="dictionariesTableCallBack"></dictionaries> -->
            <span class="fon">
              <span v-if="!item['skipSign']" style="color:red;">*</span>
              {{item.CN}}:
            </span>
            <span v-if="item.EN ==='superior'">
              <el-cascader
                v-model="superiorData"
                :options="selectOptions"
                :props="{ checkStrictly: true }"
                clearable
              ></el-cascader>
            </span>
            <span v-else>
              <!-- {{item.option}} -->
              <!-- {{searchOptions[item.EN]}} -->
              <el-select
                v-if="item.typeGroupCode"
                v-model="addData.diaDataAdd[index].value"
                placeholder="请选择"
                size="mini"
                clearable
              >
                <el-option
                  v-for="i in searchOption[item.EN]"
                  :key="i.value"
                  :label="i.label"
                  :value="i.value"
                ></el-option>
                <!-- <el-option v-for="i in item.option" :key="i.value" :label="i.label" :value="i.value"></el-option> -->
              </el-select>
              <el-select
                v-else-if="item.dictTable"
                v-model="addData.diaDataAdd[index].value"
                placeholder="请选择"
                size="mini"
                clearable
              >
                <el-option
                  v-for="i in searchOptions[item.EN]"
                  :key="i.value"
                  :label="i.label"
                  :value="i.value"
                ></el-option>
              </el-select>

              <el-select
                v-else
                v-model="addData.diaDataAdd[index].value"
                placeholder="请选择"
                size="mini"
                clearable
              >
              
                <el-option
                  v-for="i in item.option"
                  :key="i.value"
                  :label="i.label"
                  :value="i.value"
                ></el-option>
              </el-select>
            </span>
          </div>
          <!-- 多选框 -->
          <div class="Checkbox" :key="index" v-else-if="item.type=='Checkbox'&&item.addSign">
            <span class="fon">
              <span v-if="!item['skipSign']" style="color:red;">*</span>
              {{item.CN}}
            </span>
            <span class="inb" v-if="item.type=='Checkbox'&&item.addSign">
              <el-checkbox v-model="checked"></el-checkbox>
            </span>
          </div>
        </template>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="toAdd" size="mini">确 定</el-button>
        <el-button @click="addData.dialogVisibleAdd = false" size="mini">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
// 字典
// import dictionaries from '@/views/components/FLPage/dictionaries'
export default {
  data() {
    return {
      //添加数据模型
      addData: {
        //弹窗控制
        dialogVisibleAdd: false,
        //数据字典
        diaDataAddDictionaries: [],
        //添加弹窗的数据模型
        diaDataAdd: [],
        //确定的disabled，
        mainDisabled: true,
        eventualData: undefined
      },
      // selectData:[]
      selectOptions: [
        {
          value: 1,
          label: '微山自来水',
          children: 
          [
            {
              value: 2,
              label: '幸福苑小区',
              children: 
              [
                { value: 3, label: '1号楼' },
              ]
            }
          ]
        }, 
        {
          value: 4,
          label: '泗水县',
          children: 
          [
            {
              value: 5,
              label: '花园小区',
              children: 
              [
                { value: 6, label: '1号楼' },
                { value: 7, label: '2号咯' },
                { value: 8, label: '2号咯' },
                { value: 9, label: '2号咯' }
              ]
            }, 
            {
              value: 10,
              label: '荣盛小区',
            }
          ]
        }
      ],
      superiorData:'',
      // 组件类型
      modelType:'search',
      // 请求到的option
      searchOption: [],
      // 跨表请求option
      searchOptions:[],
      checked:false
    };
  },
  computed: {
    //解决v-for v-if在同一标签警告问题
    // TableDataModel() {
    //   let new_DataModel = JSON.parse(JSON.stringify(this.addData.diaDataAdd));
    //   for (let i = 0; i < new_DataModel.length; i++) {
    //     if (!new_DataModel[i].addSign) {
    //       console.log("-------------计算属性-----------");
    //       new_DataModel.splice(i, 1);
    //     }
    //   }
    //   console.log(new_DataModel)
    //   return new_DataModel;
    // }
  },
  props: [
    //添加传过来的值
    "diaDataAdd",
    "optionsZi",
    "searchOptionTable"
  ],
  mounted() {
    this.addData.diaDataAdd = JSON.parse(JSON.stringify(this.diaDataAdd));
  },
  watch:{
    optionsZi(newVal){
      this.searchOption = newVal
    },
    searchOptionTable(newVal){
      this.searchOptions = newVal
    },
    diaDataAdd:{
      deep:true,
      handler(newVal,oldVal){
        this.addData.diaDataAdd=JSON.parse(JSON.stringify(newVal))
      }
    }
  },
  methods: {
    //   获取父级select的数据
    // getSelectData(){
    //     console.log(this.$parent,'ceshikk');
    // },
    // 字典回调
    // dictionariesCallBack(res){
    //   // console.log(res,'zicisyiihsjkdjsa');
    //   this.searchOption = res     
    //   // console.log(this.searchOption,'ceshiyixia');
    // },
    // 跨表字典回调
    // dictionariesTableCallBack(res){
    //   // console.log(res,'zicisyiihsjkdjsa');
    //   this.searchOptionTable = res     
    //   // console.log(this.searchOption,'ceshiyixia');
    // },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    //搜索框内容传递给父元素
    createdAdd() {
      this.addData.dialogVisibleAdd = true;
      //清空value;
      for (let i = 0; i < this.addData.diaDataAdd.length; i++) {
        this.addData.diaDataAdd[i].value = "";
        this.addData.diaDataAdd[i].result = true;
      }
    },
    //添加-传给父组件，ajax
    toAdd() {
      let bur = true;
      let attrArr = [];
      for (let i = 0; i < this.addData.diaDataAdd.length; i++) {
        //console.log(this.addData.diaDataAdd[i].EN);    || at.value == ""
        let at = this.addData.diaDataAdd[i];
        //at.result === false || at.value == ""
        //sign
        if (at.addSign) {
          if (at.result === false || at.value == "") {
            // 判断红色星号    是否必须为空
            if (at["skipSign"]) {
              bur = true;
            }
            else{
              bur = false;
            }
          }
        } else {
        }
      }
      if (this.superiorData.length !=0) {
        bur = true
      }
      console.log(bur);

      if (bur === true) {
        this.$emit("SingleAdd", this.addData.diaDataAdd);
        // console.log(this.addData.diaDataAdd);
        // console.log(")))))))))))))))))))))))");
        this.addData.dialogVisibleAdd = false;
      } else {
        // console.log(this.superiorData.length !=0,'ceshi');       
        this.$message({
          message:'请添加全部参数，并符合标准！',
          type:'waring'
        })
        // alert("请添加全部参数，并符合标准！");
      }
    },

    // //删除-传给父组件，ajax
    // toDelete() {
    //   this.$emit("toDelete", "点击了删除");
    // },
    
    getSTime(val) {
      this.addData.diaDataAdd.createTime = val;
      // console.log(val)
    },
    //正则表达式
    BurExp(e, item, index) {
      // console.log(item, index);
      // console.log( this.addData.diaDataAdd,this.TableDataModel)
      let boolean = new RegExp(item.Exp).test(e.target.value);
      this.addData.diaDataAdd[index].result = boolean;
      // this.TableDataModel[index].result= boolean;
      // let newAobj=this.TableDataModel[index]
      // console.log(boolean);
      // console.log(this.TableDataModel[index]);
    }
  },
  created(){
    // this.getSelectData()
    //this.diaDataAdd=JSON,parse(JSON.stringify(this.diaDataAdd))
  },
  
};
</script>
<style scoped src="@/styles/allCss.css"></style>
<style lang="scss" scoped>
.all {
  display: inline-block;
  /deep/.el-dialog__body{
    display: flex;
    flex-wrap: wrap;
  }
  .list{
    .lister{
      height: 44px;
      width: 370px;
    }
    .font_color{
      font-size: 12px;
      padding-left: 100px;
      padding-top: 10px;
    }
  }
}
</style>